<template>
  <div class="call">
    <div class="logo"></div>
    <ul class="call-list">
      <li class="call-item" v-for="item in list" :key="item.code + item.lineNo">
        <div class="call-no">{{ item.code }}{{ item.lineNo }}</div>
        <div class="call-tip">
          请到<span class="text-gradient">{{ item.winId }}</span
          >号窗口办理业务
        </div>
      </li>
    </ul>
    <div class="carousel-wrap">
      <template v-for="item in resourceList">
        <video
          @ended="changeMedia(1000)"
          :src="item.videoUrl"
          v-if="item.videoUrl"
          :key="item.index"
          :ref="'resource' + item.index"
          v-show="indexPlay == item.index"
        />
        <img
          :src="item.imgUrl"
          alt=""
          v-else
          :key="item.index"
          v-show="indexPlay == item.index"
          :ref="'resource' + item.index"
        />
      </template>
    </div>
  </div>
</template>

<script>
import axios from "axios";
var dayjs = require("dayjs");
var isBetween = require("dayjs/plugin/isBetween");
dayjs.extend(isBetween);
const fs = require("fs");
export default {
  name: "call",
  data() {
    return {
      src: "",
      list: [],
      socketClient: null,
      isVideo: true,
      resourceList: [],
      indexPlay: 0,
      DIR_NAME: "C:\\feconf\\",
    };
  },
  mounted() {
    // let index = 100;
    // setInterval(() => {
    //   index++;
    //   let item = {
    //     code: index,
    //     winId: index,
    //     lineNo: index,
    //   };
    //   if (this.list.length > 3) {
    //     this.list.shift();
    //   }
    //   this.list.push(item);
    // }, 2000);

    this.getList();
    this.initWebSocket();
  },
  methods: {
    initMedia() {
      let src = this.resourceList[0];
      this.isVideo = src.hasOwnProperty("videoUrl");
      this.src = this.isVideo ? src.videoUrl : src.imgUrl;
    },
    changeMedia(time) {
      setTimeout(() => {
        this.indexPlay++;
        if (this.indexPlay === this.resourceList.length) {
          this.indexPlay = 0;
        }
        let src = this.resourceList[this.indexPlay];
        this.isVideo = src.hasOwnProperty("videoUrl") && src.videoUrl;
        if (this.isVideo) {
          this.$refs["resource" + this.indexPlay][0].play();
        } else {
          this.changeMedia(4000);
        }
      }, time);
    },

    getList() {
      let confData = fs.readFileSync(`${this.DIR_NAME}conf.json`, "utf8");
      let conf = JSON.parse(confData);
      axios
        .get(conf.VUE_APP_HTTP + "/appliedmodule/page", {
          params: {
            orderBy: "orderDesc",
            bizId: conf.VUE_APP_BIZID,
            pageNum: 1,
            pageSize: 10000,
          },
        })
        .then(({ data }) => {
          if (data.code === 0) {
            let tempData = data.data.records;
            let tempPush = [];
            for (let item of tempData) {
              if (item.forever === "否") {
                if (dayjs().isBetween(item.startTime, item.endTime)) {
                  tempPush.push(item);
                }
              } else {
                tempPush.push(item);
              }
            }

            tempPush.forEach((item, index) => {
              item.index = index;
            });
            this.resourceList = tempPush;

            this.$nextTick(() => {
              let src = this.resourceList[0];
              this.isVideo = src.hasOwnProperty("videoUrl") && src.videoUrl;
              if (this.isVideo) {
                this.$refs["resource" + this.indexPlay][0].play();
              } else {
                this.changeMedia(4000);
              }
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    initWebSocket() {
      let confData = fs.readFileSync(`${this.DIR_NAME}conf.json`, "utf8");
      let conf = JSON.parse(confData);
      this.socketClient = new WebSocket(conf.VUE_APP_SOCKET);
      this.socketClient.onopen = this.websocketOnopen;
      this.socketClient.onmessage = this.websocketOnmessage;
      this.socketClient.onerror = this.websocketOnerror;
      this.socketClient.onclose = this.websocketOnclose;
    },
    websocketOnopen(e) {
      console.log("WebSocket连接成功");
    },
    websocketOnmessage(e) {
      let data = JSON.parse(e.data);
      if (data.code === 0) {
        if (data.data) {
          if (this.list.length > 3) {
            this.list.shift();
          }
          this.list.push(data.data);
        }
      }
    },
    websocketOnclose() {
      this.socketClient.close();
      console.log("WebSocket closed");
      this.websocketReconnect();
    },
    websocketReconnect() {
      setTimeout(() => {
        this.initWebSocket();
      }, 5000);
    },
  },
};
</script>

<style lang="scss" scoped>
.call {
  width: 2160px;
  height: 3840px;
  padding-top: 139px;
  background: url("../assets/img/bg.png") no-repeat;
  background-size: 100% 100%;
  .logo {
    width: 1808px;
    height: 162px;
    background: url("../assets/img/logo.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }
}
.call-list {
  height: 1050px;
  width: 3000px;
  padding-top: 162px;
  margin: 0 auto;
  .call-item {
    display: flex;
    padding-left: 60px;
    .call-no {
      background: url("../assets/img/call-item-bg.png") no-repeat;
      background-size: 100% 100%;
      height: 150px;
      text-align: center;
      line-height: 150px;
      font-size: 180px;
      color: #ffffff;
      font-weight: bold;
      overflow: hidden;
    }
    .call-tip {
      position: relative;
      top: -80px;
      overflow: hidden;
      text-indent: 10px;
      font-size: 130px;
      color: #333333;
      white-space: nowrap;
      text-overflow: ellipsis;
      .text-gradient {
        color: #b24d23;
        // background-image: linear-gradient(to bottom, #ffe7ba, #b24d23);
        // -webkit-background-clip: text;
        // color: transparent;
        font-weight: bold;
        font-size: 180px;
        position: relative;
        top: 20px;
      }
    }
  }
}
@keyframes number {
  0% {
    transform: rotateX(0deg);
  }
  49.99999% {
    transform: rotateX(90deg);
  }
  50% {
    transform: rotateX(270deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

.carousel-wrap {
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  margin: 218px auto 0 auto;
  box-shadow: 0 2px 70px 0 #ffa53f;
  img,
  video {
    width: 1080px;
    height: 1920px;
    transition: 2s linear;
  }
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>